/*eslint-disable*/
import { Button, Spin } from "antd";
import React, { useEffect, useState, useLayoutEffect, useRef } from "react";
/**
 * useEffect: 在函数组件中，使用生命周期函数
 * useEffect(() => {
 *   console.log("ok");
 * });
 * 组件第一次渲染完毕后执行一次，类似于componentDidMount
 * 在组件每次更新完毕后，也会执行callback，类似于componentDidUpdate
 * --------------------------
 *  * useEffect(() => {
 *   console.log("ok");
 * },[]);
 * 组件第一次渲染完毕后执行一次，类似于componentDidMount
 * 在组件每次更新完毕后，不会执行callback
 * --------------------------
 *  *  * useEffect(() => {
 *   console.log("ok");
 * },[依赖的状态（多个状态）]);
 * 组件第一次渲染完毕后执行一次，类似于componentDidMount
 * 在组件每次更新完毕后，只有依赖的状态发生变化时才会执行callback
 * --------------------------
 * useEffect(() => {
 *   return () => {
 *     console.log("上一次组件卸载的时候执行");
 *   };
 * }, []);
 * 拿到的旧值，返回的小函数会在组件卸载时执行，类似于componentWillUnmount
 */

// 模拟异步请求数据
const queryData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([10, 20, 30]);
    }, 1000);
  });
};

const EffectDemo = () => {
  console.log("组件渲染了");
  const [num, setNum] = useState(0 as number);
  const [x, setX] = useState(100 as number);
  const [spinning, setSpinning] = useState(false);
  let box = React.createRef<HTMLSpanElement>();
  // -------------------------------------------------
  // 创建一个ref对象，用来保存真实的DOM元素
  // const box = useRef<HTMLSpanElement>(null);
  // 只能在函数组件中使用
  // -------------------------------------------------
  const button = useRef<HTMLButtonElement>(null);
  /**
   * useEffect必须在函数的最外层上下文中使用，不能在条件语句或者循环中
   * if (num > 5) {
    useEffect(() => {
      // 获取最新的状态值
      console.log("@1", num);
    });
  }
   */
  useEffect(() => {
    // 获取最新的状态值
    if (num > 5) {
      console.log("@1", num);
    }
    console.log(box.current);
    console.log(button.current);
  });
  // useEffect(() => {
  //   // 获取最新的状态值
  //   console.log("@2", num);
  // }, [] as any[]);
  // useEffect(() => {
  //   // 获取最新的状态值
  //   console.log("@3", num);
  // }, [x, num]);
  // useEffect(() => {
  //   // 获取最新的状态值
  //   return () => {
  //     console.log("@4", num);
  //   };
  // }, [x, num]);

  useEffect(() => {
    console.log("useEffect");
    setSpinning(true);
    queryData().then((res) => {
      console.log(res);
      setSpinning(false);
    });
  }, []);
  useLayoutEffect(() => {
    console.log("useLayoutEffect");
  }, []);
  const handle = () => {
    setNum(num + 1);
  };

  return (
    <>
      <span ref={box} style={{ color: num === 0 ? "red" : "blue" }}>
        {num}
      </span>
      <br />
      <Button onClick={handle} ref={button}>
        新增
      </Button>
      <Spin spinning={spinning} fullscreen />
    </>
  );
};

export default EffectDemo;
